<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-1.11.1.min.js"></script>
    <script src="/js/bootstrap.js"></script>
    <link rel="stylesheet" href="/css/style.css" media="screen" type="text/css" />
    <link rel="stylesheet" href="/css/bootstrap.min.css" media="screen" type="text/css" />

    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style type="text/css">
        html { overflow-x:hidden;
        background-image: url("../image/2.png")}
        *{
            padding:0px;
            margin: 0px;
        }
        #footer {
            /*position: absolute;*/
            width:100%;
            height:30px;
            border:1px solid #dfdfdf;
            /*background-color: green;*/
            /*bottom:0px;*/
        }

        #header {
            height: 10%;
            width:100%;
            background-color: #347f39;
            color: #fff;
            text-align: center;

        }

        .header_Text {
            line-height:60px;
            font-size: 28px;
        }

        .inputinfo {
            width:80%;
            height:100%;
        }

        .send {
            height:100%;
            width: 50px;
        }

        #one {
            height: 100px;;
            width:100%;
        }

        #main {
            padding: 10px;
        }


        #one_right img{
            margin:20px;
            position: absolute;
            right: 0px;

        }
        #one_right{
            border:1px solid #000;
        }

        #one_left {
            color: #0AD5C1;
            width:80%;
            height:100%;

            border:1px solid #000;
        }

        .ultest{
            background-image: url("../image/2.png");
        }
        .ultest2{
            margin: 0 auto 0 auto;
            padding: 0 0px 0 0;
            list-style: none;
            overflow-y: hidden;
            overflow-x: hidden;
            /*三角箭头的颜色*/
            scrollbar-arrow-color: #a94442;
            /*滚动条滑块按钮的颜色*/
            scrollbar-face-color: #ac2925;
            /*滚动条整体颜色*/
            scrollbar-highlight-color: #333;
            /*滚动条阴影*/
            scrollbar-shadow-color: #ccc;
            /*滚动条轨道颜色*/
            scrollbar-track-color: #666;
        }

    </style>
</head>
<body>
<!--这里是标题-->

<!--这是对话框-->
<div id="convo" class="ultest" >
    <ul class="ultest2 " id="chatContent"style="height: 440px; border: 0">
    </ul>
</div>

<!--这里是底部-->
<div id="footer" style="border-top:1px solid red ;background-color: #C3D4B5">
    <input type="text" class="inputinfo" placeholder="在此输入内容" id="content">
    <button style="border: 0;background-color: #6eb5b7;color: white;" class="send" onclick="sendmsg()">发送</button>
</div>
<script type="text/javascript">
	var ws=new WebSocket("ws://172.16.2.134:8080/chat");
	ws.onopen=function(){
		ws.send("尊贵的&nbsp;['${user.phone}']&nbsp;进入直播间");
	}
	ws.onmessage=function(event){
		showMessage(event.data);
	}
	function showMessage(data){
		var chatContent=document.getElementById("chatContent").innerHTML+"<span style='color: #fff'>"+data+"</span><br>";
		document.getElementById("chatContent").innerHTML=chatContent;
		document.getElementById("chatContent").scrollTop = document.getElementById("chatContent").scrollHeight;
	}
	
	function sendmsg(){
		var content=document.getElementById("content").value;
            ws.send("${user.phone}："+content);
            document.getElementById("content").value="";
	}
</script>
</body>
</html>